<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <th:block th:include="back/include :: header('表单构建器')" />
    <th:block th:include="back/include :: datetimepicker-css" />
</head>
<style>
    .droppable-active{background-color:#ffe!important}.tools a{cursor:pointer;font-size:80%}.form-body .col-md-6,.form-body .col-md-12{min-height:400px}.draggable{cursor:move}
    /* 添加提示框样式 */
    .alert-toast {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 9999;
        display: none;
        min-width: 250px;
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
    }
    /* 添加loading样式 */
    .btn-loading {
        position: relative;
        pointer-events: none;
    }
    .btn-loading:after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 16px;
        height: 16px;
        margin: -8px 0 0 -8px;
        border: 2px solid #fff;
        border-radius: 50%;
        border-top-color: transparent;
        animation: spin 0.8s linear infinite;
    }
    @keyframes spin {
        to { transform: rotate(360deg); }
    }
    /* 分组样式 */
    .form-group-title {
        font-size: 16px;
        font-weight: bold;
        padding: 10px 15px;
        margin: 20px 0 15px 0;
        background-color: #f5f5f5;
        border-left: 4px solid #1ab394;
    }
</style>
<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <div class="alert alert-info">
                        更新完网站内容后，在这里打包部署为静态页面，减少服务器压力的同时大大提高网站响应效率！
                        <br><br>
                        部署方式一：静态网站部署地址示例：/Users/gds/project2025/szyPortalV2/websites/szyTech/
                        <br><br>
                        部署方式二：部署到自己的Linux服务器上示例：
                        <br><br>
                        用户名：root、端口：22、密码：123456、IP：120.23.8.8、远程服务器目录：\shzhyun\webdir\
                        <br><br>
                    </div>
                    <form role="form" class="form-horizontal m-t" id="form-deploy" name="form-deploy" action="/back/deploy/commit" method="post">
                        <!-- 分组1：静态网站部署地址 -->
                        <div class="form-group-title">部署方式一：部署配置（私有化的情况下可用）</div>
                        <div class="form-group draggable">
                            <label class="col-sm-2 control-label">静态网站部署地址：</label>
                            <div class="col-sm-6">
                                <input type="text" id="deployPath" name="deployPath" class="form-control" placeholder="请输入部署地址" value="">
                            </div>
                        </div>

                        <div class="hr-line-dashed"></div>

                        <!-- 分组2：服务器信息 -->
                        <div class="form-group-title">部署方式二：部署到自己的Linux服务器上（PAAS服务可用）</div>
                        <div class="form-group draggable">
                            <label class="col-sm-2 control-label">用户名：</label>
                            <div class="col-sm-6">
                                <input type="text" id="username" name="username" class="form-control" placeholder="请输入服务器用户名">
                            </div>
                        </div>
                        <div class="form-group draggable">
                            <label class="col-sm-2 control-label">密码：</label>
                            <div class="col-sm-6">
                                <input type="password" id="password" name="password" class="form-control" placeholder="请输入服务器密码">
                            </div>
                        </div>
                        <div class="form-group draggable">
                            <label class="col-sm-2 control-label">IP地址：</label>
                            <div class="col-sm-6">
                                <input type="text" id="ip" name="ip" class="form-control" placeholder="请输入服务器IP地址">
                            </div>
                        </div>
                        <div class="form-group draggable">
                            <label class="col-sm-2 control-label">端口号：</label>
                            <div class="col-sm-6">
                                <input type="text" id="port" name="port" class="form-control" placeholder="请输入服务器端口号">
                            </div>
                        </div>
                        <div class="form-group draggable">
                            <label class="col-sm-2 control-label">远程服务器目录：</label>
                            <div class="col-sm-6">
                                <input type="text" id="remotePath" name="remotePath" class="form-control" placeholder="远程服务器目录">
                            </div>
                        </div>

                        <div class="hr-line-dashed"></div>

                        <!-- 分组3：操作按钮 -->
                        <div class="form-group-title">部署方式三：导出静态文件到本地</div>
                        <div class="form-group draggable">
                            <div class="col-sm-12 col-sm-offset-3">
                                <button class="btn btn-primary" type="submit" id="submit-btn">提交部署</button>
                                <button class="btn btn-success" type="button" id="export-btn" style="margin-left: 10px;">打包导出</button>
                            </div>
                        </div>
                    </form>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 添加提示浮框 -->
<div id="toast-message" class="alert alert-success alert-toast" role="alert">
    <strong>操作成功!</strong> 部署已完成。
</div>

<th:block th:include="back/include :: footer" />
<script th:src="@{/js/jquery-ui-1.10.4.min.js}"></script>
<th:block th:include="back/include :: datetimepicker-js" />
<script th:src="@{/ajax/libs/beautifyhtml/beautifyhtml.js}"></script>
<script type="text/javascript">
    $(document).ready(function() {
        // 表单提交处理
        $('#form-deploy').on('submit', function(e) {
            e.preventDefault();

            // 显示loading效果
            var $submitBtn = $('#submit-btn');
            $submitBtn.addClass('btn-loading');
            $submitBtn.prop('disabled', true);

            // 发送AJAX请求
            $.ajax({
                url: $(this).attr('action'),
                type: $(this).attr('method'),
                data: $(this).serialize(),
                success: function(response) {
                    // 请求成功后显示提示框
                    showToast('操作成功! 部署已完成。');
                },
                error: function(xhr, status, error) {
                    // 错误处理
                    showToast('操作失败: ' + (xhr.responseJSON.message || error), 'alert-danger');
                },
                complete: function() {
                    // 移除loading效果
                    $submitBtn.removeClass('btn-loading');
                    $submitBtn.prop('disabled', false);
                }
            });
        });

        // 导出按钮点击事件
        $('#export-btn').on('click', function() {
            // 这里可以添加导出逻辑
            showToast('操作成功! 配置已导出。');
        });

        // 显示提示框函数
        function showToast(message, type = 'alert-success') {
            var $toast = $('#toast-message');
            $toast.removeClass('alert-success alert-danger').addClass(type);
            $toast.find('strong').text(message.split('!')[0] + '!');
            $toast.find('strong').next().text(message.split('!')[1] || '');

            $toast.css('display', 'block');
            setTimeout(function() {
                $toast.css('opacity', '1');
            }, 100);

            // 3秒后淡出
            setTimeout(function() {
                $toast.css('opacity', '0');
                setTimeout(function() {
                    $toast.css('display', 'none');
                }, 500);
            }, 3000);
        }
    });
</script>
</body>
</html>